<template>
  <!-- 2022新版拼团 -->
  <div class="collage2022">
    <header>
      <div>
        <img
          src="https://image.hezongyy.com/pcimage/20211109img/pt_h5_newTopBg0.png"
        />
        <!-- 流程图 -->
        <div class="flow">
          <img
            src="https://image.hezongyy.com/pcimage/20211109img/pt_h5_newTopBg2.png"
            class="flowImg"
          />
          <div class="flowText" @click="showRule = true">活动规则</div>
        </div>
      </div>
    </header>
    <!-- TAB选项 -->
    <div class="changeGoodsBg">
      <div class="changeGoodsBg1">
        <div class="changeGoods">
          <div
            v-for="(item, index) in goodsState"
            :key="index"
            @click="changeGoodsState(item)"
            :class="{ pitchOn: item.numState == checkedState }"
          >
            {{ item.titleState }}
          </div>
        </div>
      </div>
    </div>
    <main>
      <!-- 有商品商品 -->
      <div class="goods" v-if="bayGoodsList.length > 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多商品信息了"
          @load="groupPurchase()"
        >
          <div
            class="goodsList"
            v-for="(v, index) in bayGoodsList"
            :key="index"
          >
            <div v-for="(item, index) of v.goodsVoList" :key="index">
              <div class="tuxedoNum" :class="{ tuxeTop: item.isCanBuy == 5 }">
                <span v-if="item.isCanBuy != 5"
                  >{{
                    item.totalQuantity - item.quantity + item.virtualNumber
                  }}人参团</span
                >
              </div>
              <div class="flex">
                <img :src="item.appCoverPictureUrl" alt="" />
                <div class="flex-1">
                  <h2 class="text0">{{ item.name }}</h2>
                  <p class="text">{{ item.manufacturerName }}</p>
                  <p class="text">规格：{{ item.specification }}</p>
                  <p class="text">效期：{{ item.expirationDate }}</p>
                  <div class="text1">
                    <van-progress
                      color="#F34444"
                      track-color="#FFCDCD"
                      stroke-width="13"
                      class="text1Progress"
                      :pivot-text="setText(item)"
                      :percentage="setPercentage(item)"
                    />
                    <span class="text1All">还剩{{ item.quantity }}</span>
                  </div>
                  <p class="textRemark">{{ v.remark }}</p>
                </div>
              </div>
              <div class="goodsPrice flex">
                <div class="goodsPriceNum">
                  <del>原价：￥{{ item.originalPrice }}</del>
                  <p>
                    拼团价<span>￥</span><span>{{ item.sellingPrice }}</span>
                  </p>
                </div>
                <div
                  class="goodsBtn weightBold"
                  :class="getBtnText(item.isCanBuy).color[0]"
                >
                  <span
                    class="goodsBtnNum"
                    :class="getBtnText(item.isCanBuy).color[2]"
                    >固定购买量{{ item.limitedQuantity }}</span
                  >
                  <span
                    class="goodsBtnOK"
                    :class="getBtnText(item.isCanBuy).color[1]"
                  >
                    <span
                      :class="getBtnText(item.isCanBuy).color[3]"
                      @click="openDialog(item, getBtnText(item.isCanBuy).title)"
                      >{{ getBtnText(item.isCanBuy).title }}</span
                    >
                  </span>
                </div>
              </div>
              <div
                v-if="item.isCanBuy != 5"
                class="goodsTime colorFF6152 weightBold"
              >
                <span class="mr02">距离拼团结束</span>
                <div>
                  <van-count-down :time="countTimeEnd(v)">
                    <template #default="timeData">
                      <span class="goodsTimeBoxTime colorFF6152">
                        <span class="goodsTimeBox colorfff">{{
                          addZero(timeData.hours + timeData.days * 24)
                        }}</span
                        >:
                        <span class="goodsTimeBox colorfff">{{
                          addZero(timeData.minutes)
                        }}</span>
                        :
                        <span class="goodsTimeBox colorfff">{{
                          addZero(timeData.seconds)
                        }}</span>
                      </span>
                    </template>
                  </van-count-down>
                </div>
              </div>
              <div
                v-if="item.isCanBuy == 5"
                class="goodsTime colorFF6152 weightBold"
              >
                <span class="lineH font1 colorFF6152 mr02">距离拼团开始</span>
                <div>
                  <van-count-down
                    :time="countTimeStart(v)"
                    format="yyy/mm/dd hh:mm:ss"
                  >
                    <template v-if="v.bigday == 0" #default="timeData">
                      <span class="goodsTimeBoxTime colorFF6152">
                        <span class="goodsTimeBox colorfff">{{
                          addZero(timeData.hours)
                        }}</span
                        >:
                        <span class="goodsTimeBox colorfff">{{
                          addZero(timeData.minutes)
                        }}</span>
                        :
                        <span class="goodsTimeBox colorfff">{{
                          addZero(timeData.seconds)
                        }}</span>
                      </span>
                    </template>
                    <template v-else>
                      <span class="lineH font1 colorFF6152">
                        {{ dateProcessing(v.startTime)[1] }}月{{
                          dateProcessing(v.startTime)[2]
                        }}开拼
                      </span>
                    </template>
                  </van-count-down>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <!-- 没有商品 -->
      <div class="nullGoods" v-else>
        <img
          src="https://image.hezongyy.com/pcimage/20211109img/h5_collage2022_null.png"
        />
        <p class="colorfff">
          <span v-if="groupFrom.type == 2 || groupFrom.type == 0"
            >暂无拼团商品，请稍后再看~</span
          ><span v-else>暂无预告商品，请稍后再看~</span>
        </p>
      </div>
    </main>

    <!-- 弹出规则 -->
    <van-overlay :show="showRule">
      <div class="wrapper" @click="showRule = false">
        <div class="wrapperIn">
          <img
            src="https://image.hezongyy.com/pcimage/20211109img/h5_collage_close.png"
            @click="showRule = false"
          />
          <img
            src="https://image.hezongyy.com/pcimage/20211109img/h5_collage_rule.png"
            @click.stop
          />
        </div>
      </div>
    </van-overlay>

    <!-- 返回顶部 -->
    <div class="upgrade" @click="goTop" v-show="goTopShow">
      <img src="https://image.hezongyy.com/pcimage/119h5/goup.png" alt="" />
    </div>
  </div>
</template>

<script>
//引入保存所有接口的url文件
import url from "../../../axios/apiUrl";
//引入api.js定义的方法index
import { postRequest } from "../../../api/index";
import { getRequest } from "../../../api/indexGet";
export default {
  components: {},
  props: {},
  data() {
    return {
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完成
      goodsState: [
        { titleState: "全部", numState: 0 },
        { titleState: "拼团中", numState: 1 },
        { titleState: "预告中", numState: 2 }
      ],
      // 按键颜色
      goodsBtnStyle: [
        {
          title: "立即拼团",
          color: ["buyBg0", "buyBtnBg0", "color0", "colorfff"]
        },
        {
          title: "已参团",
          color: ["buyBg1", "buyBtnBg1", "color1", "colorfff"]
        },
        {
          title: "已售罄",
          color: ["buyBg2", "buyBtnBg2", "color999", "color666"]
        },
        {
          title: "已结束",
          color: ["buyBg2", "buyBtnBg2", "color999", "color666"]
        },
        {
          title: "即将开始",
          color: ["buyBg3", "buyBtnBg3", "color3", "colorfff"]
        },
        {
          title: "无购买资质",
          color: ["buyBg2", "buyBtnBg2", "color999", "color666"]
        }
      ],
      checkedState: 0, // tab 默认0
      bayGoodsList: [], //商品列表
      showRule: false, // 规则显示
      groupFrom: {
        pageNumber: 1,
        pageSize: 10,
        type: 2
      },
      goTopShow: false
    };
  },
  mounted() {
    this.groupPurchase();

    // 滚轮
    let node = document.querySelector(".collage2022");
    node.onscroll = () => {
      this.bottomPX = node.scrollHeight - node.scrollTop - node.clientHeight;
      // 显示返回顶部
      if (node.scrollTop <= 100) {
        this.goTopShow = false;
      }
      if (node.scrollTop > 600) {
        this.goTopShow = true;
      }
    };
  },
  methods: {
    // 改变列表状态
    changeGoodsState(item) {
      this.checkedState = item.numState;
      this.groupFrom.pageNumber = 1;
      //* 拼团中 0    预告 1    全部 2
      if (item.numState == 1) {
        this.groupFrom.type = 0;
        this.groupPurchase();
      } else if (item.numState == 2) {
        this.groupFrom.type = 1;
        this.groupPurchase();
      } else if (item.numState == 0) {
        this.groupFrom.type = 2;
        this.groupPurchase();
      }

      this.goTop();
    },

    //回到顶部
    goTop() {
      let node = document.querySelector(".collage2022");
      if (node) {
        node.scrollTop = 0;
      } else {
        node.scrollTop = 0;
      }
    },

    //拼团活动商品列表
    async groupPurchase() {
      let res = await postRequest(url.groupListByType, this.groupFrom);
      if (res.data.code == "000000") {
        if (this.groupFrom.pageNumber == 1) {
          this.bayGoodsList = [];
        }
        this.loading = false;
        this.groupFrom.pageNumber++;
        this.bayGoodsList = this.bayGoodsList.concat(res.data.content.list);
        if (this.bayGoodsList.length == res.data.content.totalRecords) {
          this.finished = true;
        } else {
          this.finished = false;
        }
      } else if (res.data.message == "系统异常") {
        this.$toast("网络异常，请稍后再试");
      } else if (res.data.code != "000000") {
        this.$toast(res.data.message);
      }
    },

    //设置进度条文字
    setText(row) {
      if (row.isCanBuy == 5) {
        return "";
      } else {
        return `已售${row.totalQuantity - row.quantity + row.virtualNumber}`;
      }
    },

    // 设置进度条百分比
    setPercentage(row) {
      if (row.isCanBuy != 5) {
        if (
          ((row.totalQuantity - row.quantity + row.virtualNumber) /
            (row.totalQuantity + row.virtualNumber)) *
            100 <
          45
        ) {
          return 45;
        } else {
          return (
            ((row.totalQuantity - row.quantity + row.virtualNumber) /
              (row.totalQuantity + row.virtualNumber)) *
            100
          );
        }
      } else {
        return 0;
      }
    },

    // 按钮的字
    // 是否能购买   1能买，2已购买过,3资质范围等不能买,4已售罄,5活动未开始
    getBtnText(val) {
      if (val == 1) return this.goodsBtnStyle[0];
      if (val == 2) return this.goodsBtnStyle[1];
      if (val == 4) return this.goodsBtnStyle[2];
      if (val == 3) return this.goodsBtnStyle[5];
      if (val == 5) return this.goodsBtnStyle[4];
    },

    // 点击拼团
    openDialog(item, text) {
      if (text == "立即拼团") {
        var isIos = !!navigator.userAgent.match(
          /\(i[^;]+;( U;)? CPU.+Mac OS X/
        ); //ios终端
        if (isIos) {
          let form = {};
          form.id = item.id;
          form.originalPrice = item.originalPrice;
          form.goodsId = item.goodsId;
          window.webkit.messageHandlers.showGroupBookingAlert.postMessage(form);
        } else {
          japp.placeCollage(item.id, item.goodsId, item.originalPrice);
        }
      }
    },

    // 倒计时----距离结束时间
    countTimeEnd(val) {
      let sT = val.startTime.replace(/-/g, "/");
      let eT = val.endTime.replace(/-/g, "/");
      let startTimestamp = Date.parse(sT);
      let endTimestamp = Date.parse(eT);

      if (startTimestamp - val.currentTime <= 0) {
        return endTimestamp - val.currentTime;
      }
    },

    // 倒计时----距离开始时间
    countTimeStart(val) {
      let startTimestamp = Date.parse(val.startTime.replace(/-/g, "/"));
      if (startTimestamp - val.currentTime < 86400000) {
        // 添加 判断 ， 距离开始时间是不是大于一天
        this.$set(val, "bigday", 0);
        return startTimestamp - val.currentTime;
      }
      if (startTimestamp - val.currentTime > 86400000) {
        this.$set(val, "bigday", 1);
        return startTimestamp - val.currentTime;
      }
    },

    // 日期处理
    dateProcessing(date) {
      date = (date + "").split(/[ ]+/);
      let result = [];
      let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
      // 用截取出来的年月日进行正则表达式匹配
      reg.exec(date[0]);
      result.push(RegExp.$1); //获取匹配到的第一个子匹配，即‘2020’
      result.push(this.splitZe(RegExp.$2));
      result.push(this.splitZe(RegExp.$3));
      return result;
    },
    // 字符串去除零
    splitZe(num) {
      let nums = Number(num);
      return nums;
    },
    // 加零
    addZero(m) {
      return m < 10 ? "0" + m : m;
    }
  }
};
</script>

<style lang="less" scoped src="./index.less"></style>
